<template>
  <div class="all">
    <div class="class">
      <div class="class-header">
        <div class="header-left">
          <div class="line"></div>
          <div class="title">批量录入学生信息</div>
        </div>
        <div class="header-right"></div>
      </div>
    </div>

    <div class="class-content">
      <el-upload
        class="upload-demo"
        :before-upload="beforeUpload"
        drag
        :accept="'.xls,.xlsx'"
        :http-request="customUpload"
        >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">脱拽文件到这 <em>点击上传文件</em></div>
      </el-upload>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="studentName" label="姓名" align="center"> </el-table-column>
        <el-table-column prop="sex" label="性别" align="center"> </el-table-column>
        <el-table-column prop="tel" label="电话" align="center"> </el-table-column>
        <el-table-column prop="major" label="学校和专业" align="center"> </el-table-column>
        <el-table-column prop="remarks" label="备注" align="center"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { UploadFilled } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
//本地拿user
const user = JSON.parse(localStorage.getItem('user'))

const token = localStorage.getItem('token')


//表格数据
const tableData = ref([])

// 上传前校验
const beforeUpload = (file) => {
  const isExcel =
    file.type.includes('excel') || file.name.endsWith('.xls') || file.name.endsWith('.xlsx')
  if (!isExcel) {
    ElMessage.error('仅支持Excel文件')
    return false
  }
  return true
}





const customUpload = async (options) => {
  const formData = new FormData()
  formData.append('file', options.file)
  if(user.roleId == '1'||user.roleId == '2'){
    formData.append('saleId', 0) 
  }
  if(user.roleId == '5'){
    formData.append('saleId', user.userId)
  }

  try {
    const res = await axios.post(
      'https://oa.baoerkeji.com.cn/project-4/addNoSignUpList',
      formData,
      {
        headers: {
          'Authorization': sessionStorage.getItem("token"),
          'Token': sessionStorage.getItem("token"),
        }
      }
    )
    
    if (res.data.code === 200) {
      tableData.value = res.data.dataset 
      ElMessage.success(res.data.msg)
    } else {
      ElMessage.error(res.data.msg)
    }
  } catch (error) {
    ElMessage.error(`上传失败：${error.response?.data?.msg || error.message}`)
  }
}



</script>

<style scoped>
.class {
  width: 90%;
  height: 10%;
  margin-bottom: 20px;
  margin-top: 20px;
}
.line {
  width: 2px;
  height: 20px;
  background-color: #007bff;
  margin-left: 40px;
}
.title {
  padding-left: 10px;
  font-size: 20px;
  margin-right: 20px;
}
.class-content {
  width: 90%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.page {
  margin-top: 50px;
  margin-bottom: 20px;
}

/* 表格数据 */
:deep(.el-table) {
  margin-top: 20px;
  max-height: 200px;
}
:deep(.el-table thead th) {
  background-color: #fbfcff !important;
}
:deep(.el-table .cell) {
  color: black;
}
:deep(.del) {
  margin-left: 55px;
}
/* 分页背景色 */
:deep(.el-pager .is-active) {
  background-color: #0f6ab1 !important;
}

:deep(.upload-demo) {
  width: 800px;
  margin-top: 20px;
}
</style>>

